<template>
  <div class="home">
    <div class="banner-box">
      <!-- <img src="../../assets/images/banner.png" alt="banner" /> -->
      <el-carousel height="600px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img
            :src="item.bannerPic"
            @click="openOtherWeb(item.bannerUrl)"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home-content">
      <div class="product-box">
        <div
          v-for="(item, index) in consultData"
          @mouseover="changeIcon(1, index)"
          @mouseleave="changeIcon(2, index)"
          :key="index"
        >
          <router-link class="pro-item" :to="item.pageUrl">
            <img :src="item.hoverUrl" v-if="index === hoverIndex" alt="icon" />
            <img :src="item.url" v-else alt="icon" />
            <span>{{ item.text }}</span>
          </router-link>
        </div>
      </div>
      <div class="coursehall-box">
        <div class="news-title-wrapper">
          <label>课程大厅</label>
          <p>Course Hall</p>
        </div>
        <div class="course-content">
          <div class="course">
            <a href="http://px.evo.eceping.net/Home/wuhan" target="_blank">
              <button>安管人员（ABC证）继教</button>
            </a>
          </div>
          <div class="course">
            <a href="http://px.evo.eceping.net/Home/wuhan" target="_blank">
              <button>安管人员（ABC证）继教</button>
            </a>
          </div>
          <div class="course">
            <a href="https://bdy.kq.eceyun.net/#/login" target="_blank">
              <button>建筑七大员新考</button>
            </a>
          </div>
          <div class="course">
            <a href="https://bdy.eceyun.net/#/login" target="_blank">
              <button>建筑七大员继教</button>
            </a>
          </div>
        </div>
      </div>
      <div class="notice-train-box">
        <div class="info-wrapper">
          <div class="title-wrapper">
            <span class="title">公告通知</span>
            <a href="/notification"
              ><label>更多<span>>></span></label></a
            >
          </div>
          <div class="info-content">
            <notifi-item :notifiItemList="notifiList" />
          </div>
        </div>
        <div class="train-wrapper">
          <div class="title-wrapper">
            <span class="title">职业培训</span>
          </div>
          <div class="train-content">
            <div class="train-content-item">
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training1"
                  >建筑安管人员（ABC证）新考及继教</a
                >
              </div>

              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training2">建筑特种工新考及继教</a>
              </div>
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training3">建筑七大员新考及继教</a>
              </div>

              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training4">建筑技能工新考及继教</a>
              </div>
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training5"
                  >水利安管人员（ABC证）新考及继教</a
                >
              </div>
            </div>
            <div class="train-content-item">
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training6">水利五大员新考及继教</a>
              </div>

              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training7"
                  >公路安管人员（ABC证）新考及继教</a
                >
              </div>
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training8">公路施工员、公路养护工新考</a>
              </div>

              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training9">安监特种工新考及继教</a>
              </div>
              <div class="label-wrapper">
                <div class="train-yuan"></div>
                <a href="/technical/training10">其他建设行业证书新考及继教</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="news-box">
        <div class="news-title-wrapper">
          <label>行业资讯</label>
          <p>News Center</p>
        </div>
        <div class="news-content">
          <info-left
            class="news-content-left"
            :infoLeftdata="infoLeftdata"
          ></info-left>
          <div class="news-content-right">
            <info-item :infoRightList="infoRightList"></info-item>
          </div>
        </div>
        <div class="bt-box">
          <info-button></info-button>
        </div>
      </div>
      <div class="link">
        <div class="link-title">
          <span>友情链接</span>
          <span>link</span>
        </div>
      </div>
      <link-swipper></link-swipper>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import InfoButton from "./components/InfoButton.vue";
import InfoItem from "./components/infoItem.vue";
import InfoLeft from "./components/infoLeft.vue";
import NavFooter from "../../components/NavFooter.vue";
import notifiItem from "./components/notificationItem.vue";
import LinkSwipper from "./components/LinkSwipper";
import {
  getGatewayHomeBannerList,
  getnotification,
  getInformation,
} from "@/api/home.js";
export default {
  components: {
    notifiItem,
    NavFooter,
    InfoLeft,
    InfoItem,
    InfoButton,
    LinkSwipper,
  },
  data() {
    return {
      hoverIndex: "",
      consultData: [
        {
          url: require("../../assets/images/pro-icon1.png"),
          hoverUrl: require("../../assets/images/pro_icon1_selected.png"),
          text: "建筑企业资质咨询",
          pageUrl: "/production/pro1",
        },
        {
          url: require("../../assets/images/pro-icon2.png"),
          hoverUrl: require("../../assets/images/pro_icon2_selected.png"),
          text: "成人学历提升",
          pageUrl: "/production/pro2",
        },
        {
          url: require("../../assets/images/pro-icon3.png"),
          hoverUrl: require("../../assets/images/pro_icon3_selected.png"),
          text: "职业教育云平台开发与运维",
          pageUrl: "/production/pro3",
        },
        {
          url: require("../../assets/images/pro-icon4.png"),
          hoverUrl: require("../../assets/images/pro_icon4_selected.png"),
          text: "职业教育课程研发",
          pageUrl: "/production/pro4",
        },
        {
          url: require("../../assets/images/pro-icon5.png"),
          hoverUrl: require("../../assets/images/pro_icon5_selected.png"),
          text: "建设行业管理及技术人员业务培训",
          pageUrl: "/production/pro5",
        },
        {
          url: require("../../assets/images/pro-icon6.png"),
          hoverUrl: require("../../assets/images/pro_icon6_selected.png"),
          text: "职业培训",
          pageUrl: "/technical/training1",
        },
      ],
      bannerList: [],
      notifiList: [],
      infoLeftdata: {},
      infoRightList: [],
    };
  },
  created() {
    this.getBanner();
    this.getnotifi();
    this.getinfo();
  },
  methods: {
    changeIcon(type, index) {
      if (type === 1) {
        this.hoverIndex = index;
      } else {
        this.hoverIndex = "";
      }
    },
    //获取轮播图
    getBanner() {
      let params = {
        entpId: 170,
      };
      getGatewayHomeBannerList(params).then((res) => {
        this.bannerList = res.data;
      });
    },
    //点击轮播图跳转
    openOtherWeb(url) {
      window.open(url);
    },
    //获取通知公告
    getnotifi() {
      let params = {
        entpId: 170,
      };
      getnotification(params).then((res) => {
        console.log("clh---->", res.data);
        if (res.data === null || res.data === undefined) {
          return;
        }
        this.notifiList = res.data.headlineNewsList;
      });
    },
    //获取新闻资讯
    getinfo() {
      let params = {
        entpId: 170,
      };
      getInformation(params).then((res) => {
        console.log("clh--info-->", res.data);
        if (res.data === null || res.data === undefined) {
          return;
        }
        this.infoRightList = res.data.generalNewsList;
        if (res.data.headlineNewsList && res.data.headlineNewsList.length > 0) {
          this.infoLeftdata = res.data.headlineNewsList[0];
        }
      });
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  font-weight: 400;
  background: #fff;
  border: #fff 1px solid;

  .banner-box {
    width: 100%;
    min-height: 600px;
    img {
      min-height: 600px;
      object-fit: cover;
      width: 100%;
    }
  }

  .home-content {
    width: 1200px;
    margin: 0 auto;
  }

  .product-box {
    display: flex;
    height: 148px;
    width: 100%;
    align-items: center;
    justify-content: center;

    .pro-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 30px;
      font-size: 13px;
      font-weight: 400;
      color: #666666;
      white-space: nowrap;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
      }
    }

    .pro-item:hover {
      color: #2590f4;
    }
  }

  .notice-train-box {
    width: 100%;
    display: flex;
    margin-top: 60px;
  }

  .info-wrapper {
    // border: solid 1px green;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .info-content {
      margin-top: 30px;
    }
    .info-item {
      width: 560px;
      height: 78px;
      background: #ffffff;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      img {
        width: 140px;
        height: 78px;
      }
      .info-acti {
        width: 392px;
        height: 78px;
        overflow: hidden;
        padding: 7px 14px 6px 13px;
        h4 {
          color: #666666;
        }
        h4:hover {
          color: #2590f4;
        }
      }
    }
  }

  .title-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    border-bottom: 2px solid #f3f3f3;
    &:after {
      position: absolute;
      left: 0;
      bottom: -1px;
      content: "";
      width: 100px;
      height: 2px;
      border-radius: 5px;
      background: #2590f4;
    }

    .title {
      font-size: 24px;
      padding-bottom: 20px;
      color: #333333;
    }

    label {
      font-size: 12px;
      color: #999999;

      span {
        width: 13px;
        height: 10px;
        color: #cccccc;
      }
    }
  }

  .train-wrapper {
    width: 50%;
    margin-left: 80px;

    .train-content {
      display: flex;
      width: 100%;
      margin-top: 30px;

      .train-content-item {
        width: 50%;
        text-align: left;
      }

      .label-wrapper {
        display: flex;
        align-items: center;
        padding: 12px 2px;
        white-space: nowrap;

        a {
          margin-left: 10px;
          line-height: 14px;
          font-size: 14px;
          color: #666666;
        }

        .train-yuan {
          width: 8px;
          height: 8px;
          border: 1px solid #2590f4;
          border-radius: 50%;

          .selected {
            background: #2590f4;
          }
        }
      }

      .label-wrapper:hover {
        .train-yuan {
          background: #2590f4;
        }

        a {
          color: #2590f4;
        }
      }
    }
  }

  .coursehall-box {
    width: 100%;
    margin: 0 auto;
    margin-top: 40px;

    .course-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 45px;
    }

    .course {
      width: 268px;
      height: 72px;
      font-size: 16px;
      text-align: center;
      line-height: 72px;

      button {
        width: 260px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-style: none;
        color: #fff;
        background: url("../../assets/images/course_bg.png") no-repeat;
      }
    }

    .course:hover {
      width: 268px;
      height: 72px;
      border: 1px solid #51a3ff;
      font-weight: bold;
    }
  }

  .news-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: 88px;
  }

  .news-title-wrapper {
    text-align: center;

    label {
      font-size: 24px;
      color: #333333;
    }

    p {
      font-size: 14px;
      color: #999999;
    }
  }

  .news-content {
    display: flex;
    margin-top: 30px;

    .news-content-right {
      margin-left: 68px;
    }

    .news-content-left {
      margin-top: 30px;
    }
  }

  .bt-box {
    text-align: center;
    margin-top: 60px;
  }

  .link {
    width: 100%;
    padding-bottom: 40px;
    margin-top: 60px;
    .link-title {
      text-align: center;
      width: 100%;

      span {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 24px;
        height: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        &:nth-child(2) {
          padding-top: 12px;
          font-size: 14px;
          height: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>
